import { connect } from "dva"
import React, { useState, useEffect } from "react"
import { Link } from "umi"
import { useLocation, useHistory } from "react-router"
import { Calendar, Badge, Avatar, Button } from "antd"
import { UserOutlined, LeftOutlined, RightOutlined, UndoOutlined } from "@ant-design/icons"

// import { PresetStatusColorType } from "../../../node_modules/antd/lib/_util/colors"
import moment from "dayjs"

import "./indexCalendarTable.less"
import styles from "./index.less"

interface IsListData {
  type?: any;
  content?: React.ReactNode;
}



const locale: any = {
  lang: {
    locale: "zh-cn",
    month: "月",
    year: "年",
  },
}

// 点击选择日期回调
const onSelect = (date: any) => {
  console.log("点击日期变化回调", date.format("YYYY-MM-DD"))
}

const onChange = (date: any) => {
  console.log("日期变化回调", date.format("YYYY-MM-DD"))
}

const getNode = (dateList: any[], value: any, date: any) => {
  let currentDate = moment().format("YYYY-MM-DD")
  let currentValue = value.format("YYYY-MM-DD")

  const item = dateList.find((el, index) => {
    return moment(el.date).isSame(value, "day")
  })

  if (!item) {
    return (
      <div style={{ height: "120px", display: "flex", flexDirection: "column" }} >
        <div className={styles.dateTopWrap}>
          <div className={styles.dateTopWrapLeft} />
          <div className={currentDate === currentValue ? styles.currentDate : null}> {date} </div>
        </div>
      </div>
    )
  }

  return (
    <div style={{ height: "120px", display: "flex", flexDirection: "column" }} >
      <div className={styles.dateTopWrap}>
        <div className={styles.dateTopWrapLeft}>
          <div style={{ fontSize: "14px", fontFamily: " PingFang SC", fontWeight: 600 }} >待会诊</div>
          <div style={{ fontSize: "18px", fontWeight: 600 }}>{item.dhz}</div>
        </div>
        <div className={currentDate === currentValue ? styles.currentDate : null}> {date} </div>
      </div>

      {
        item.hzz ? (
          <div className={styles.dateTipWrap} >
            <span>会诊中</span>
            <span style={{ fontSize: "18px" }} >{item.hzz}</span>
          </div>
        ) : null
      }

    </div>
  )

}


// 自定义渲染日期单元格  点击按日期排的时候
function dateFullCellRender(value: any) {
  let currenDate = moment().format("DD")
  let currenDateNum = moment().daysInMonth()  // 当月天数
  let date = value.date() // 日期
  let dateList = [
    {
      date: "2021-5-1",
      dhz: 12,
      hzz: 23
    },
    {
      date: "2021-5-14",
      dhz: 2,
      hzz: 0
    },
    {
      date: "2021-5-7",
      dhz: 12,
      hzz: 3
    }
  ]
  // console.log(moment(value._d).format("YY-MM-DD").substring(0, 5))
  return (
    getNode(dateList, value, date)
  )
}

// const defaultValue: any = moment() // 默认显示无需设置当天日期
// const value: any = moment("2021-04-29") //设置要显示的日期   value={value}

// 顶部3个模块
const Top = () => {
  return (
    <div className={styles.top} >
      {/* 左侧 */}
      <div className={styles.left}>
        <div className={styles.leftTop}>
          <div className={styles.goodTitle}>
            <Avatar size="large" icon={<UserOutlined />} />
            <span style={{ paddingLeft: "15px", color: "#000000", fontSize: "20px" }}>早安，Ant Design，2021年4月10号（五）祝你开心每一天！</span>
          </div>
          <div className={styles.leftBottomFlex}>
            <div style={{ borderRight: "1px solid #E4E7ED" }} className={styles.topNumber}>
              <div className={styles.leftTopTitle} >会诊患者</div>
              <div className={styles.leftTopNum}>232</div>
            </div>
            <div style={{ borderRight: "1px solid #E4E7ED" }} className={styles.topNumber}>
              <div className={styles.leftTopTitle}>专家人数</div>
              <div className={styles.leftTopNum} >23455</div>
            </div>
            <div style={{ borderRight: "1px solid #E4E7ED" }} className={styles.topNumber}>
              <div className={styles.leftTopTitle}>会诊小组</div>
              <div className={styles.leftTopNum}>234</div>
            </div>
            <div className={styles.topNumber}>
              <div className={styles.leftTopTitle}>会诊次数</div>
              <div className={styles.leftTopNum} >3523</div>
            </div>
          </div>
        </div>
        <div className={styles.myToDo} >
          <div className={styles.myToDoTitle}>我的待办</div>
          <div className={styles.leftBottomFlex2}>
            <div style={{ borderRight: "1px solid #E4E7ED" }} className={styles.topNumber}>
              <div className={styles.leftTopTitle} >今日待会诊</div>
              <div className={styles.leftTopNum2}>232</div>
            </div>
            <div style={{ borderRight: "1px solid #E4E7ED" }} className={styles.topNumber}>
              <div className={styles.leftTopTitle}>待审核会诊</div>
              <div className={styles.leftTopNum2} >23455</div>
            </div>
            <div style={{ borderRight: "1px solid #E4E7ED" }} className={styles.topNumber}>
              <div className={styles.leftTopTitle}>待评价会诊</div>
              <div className={styles.leftTopNum2}>234</div>
            </div>
            <div className={styles.topNumber}>
              <div className={styles.leftTopTitle}>会诊中</div>
              <div className={styles.leftTopNum2} >3523</div>
            </div>
          </div>
        </div>
      </div>
      {/* 右侧 */}
      <div className={styles.right}>
        <div className={styles.teamWrap} >
          <div className={styles.team}>团队</div>
          <div>更多 &gt;</div>
        </div>
        <div className={styles.teamCon} >
          <div className={styles.teamItem}>
            <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2840095576,249531003&fm=26&gp=0.jpg" />
            <p>医科大学牙科会诊</p>
          </div>
          <div className={styles.teamItem}>
            <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2840095576,249531003&fm=26&gp=0.jpg" />
            <p>医科大学牙科会诊</p>
          </div>
          <div className={styles.teamItem}>
            <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2840095576,249531003&fm=26&gp=0.jpg" />
            <p>高逼格设计天团</p>
          </div>
          <div className={styles.teamItem}>
            <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2840095576,249531003&fm=26&gp=0.jpg" />
            <p title="高逼格设计天团医科大学牙科会诊" >高逼格设计天团医科大学牙科会诊</p>
          </div>
          <div className={styles.teamItem}>
            <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2840095576,249531003&fm=26&gp=0.jpg" />
            <p>专业测试团队</p>
          </div>

        </div>
      </div>
      {/* 右侧 end */}
    </div >
  )

}


// 点击下个月
const nextMonth = (obj: any) => {
  const { value, type, onChange, onTypeChange } = obj
  const newValue = value.clone()
  newValue.month(parseInt(newValue.month() + 1, 10))
  onChange(newValue)
}

// 点击上个月
const lastMonth = (obj: any) => {
  const { value, type, onChange, onTypeChange } = obj
  const newValue = value.clone()
  let c = parseInt(newValue.month(), 10) - 1
  newValue.month(c)
  onChange(newValue)
}

// 点击跳转今日
const clickToday = (obj: any) => {
  const { value, type, onChange, onTypeChange } = obj
  let old = value.format("YYYY-MM-DD")
  let newV = moment().format("YYYY-MM-DD")
  if (old === newV) {
    return
  }
  const newValue = value.clone()
  const YYYY = moment().format("YYYY")
  const MM = moment().format("MM")
  const DD = moment().format("DD")

  newValue.month(parseInt(MM, 10) - 1)
  newValue.date(parseInt(DD, 10))
  newValue.year(parseInt(YYYY, 10))
  onChange(newValue)
}

/* 
 自定义头部
onChange 切换月份用
onTypeChange 切换面板用，年、月。
type 搭配 onTypeChange用的
value 实际上是 moment类型
*/
const headerRender = (obj: any) => {

  const { value, type, onChange, onTypeChange } = obj
  const month = value.month() + 1 // 当前月份
  const strTitle = value.format("YYYY年MM月") // 月份标题
  console.log("自定义头部：", value.format("YYYY-MM-DD"), month, strTitle)

  // 星期几
  const dateList = (<div className={styles.rlDate}>
    <span>一</span>
    <span>二</span>
    <span>三</span>
    <span>四</span>
    <span>五</span>
    <span>六</span>
    <span>日</span>
  </div >)

  const conten = <div>
    <div className={styles.rlTop} >
      <div>
        <Button onClick={() => lastMonth(obj)} icon={<LeftOutlined />}>上个月</Button>
      </div>
      <div className={styles.rltwo}>{strTitle}</div>
      <div>
        <Button onClick={() => clickToday(obj)} style={{ marginRight: "20px" }} icon={<UndoOutlined />}>跳转今日</Button>
        <Button onClick={() => nextMonth(obj)} >下个月 <RightOutlined /> </Button>
      </div>
    </div>
    {dateList}
  </div >

  return conten
}

const index: React.FC = () => {
  return (
    <div className={styles.indexWrap} >

      <Top />

      {/* 日历 */}
      <div className={styles.indexCalendar} >
        <Calendar
          className="indexCalendarTable"
          dateFullCellRender={dateFullCellRender}
          locale={locale}
          onSelect={onSelect}
          onChange={onChange}
          headerRender={headerRender}
        />
      </div>

    </div >
  )

}


// 字面意思就是，把models的state变成组件的props
function mapStateToProps(state: any) {
  const { num } = state.index // index就是models命名空间名字
  return state.index
}


// 仓库和组件连接
export default connect(mapStateToProps)(index)
